<template>
    <div>
        <div v-if="revalue.length>0">
            <ul class="el-upload-list el-upload-list--picture-card">
                <li :key="index" :style="'width: '+size+'px;height: '+size+'px'" :tabindex="index" class="el-upload-list__item is-ready" v-for="(value,index) in revalue">
                    <div>
                        <img :src="value" alt class="el-upload-list__item-thumbnail" />
                        <span class="el-upload-list__item-actions">
                            <!-- <span @click="deleteMaterial(index)" class="el-upload-list__item-delete">
                                <i class="el-icon-delete" />
                            </span>-->
                            <span class="el-upload-list__item-actions">
                                <span @click="moveMaterial(index,'up')" class="el-upload-list__item-preview" v-if="index != 0">
                                    <i class="el-icon-back" />
                                </span>
                                <span @click="zoomMaterial(index)" class="el-upload-list__item-preview">
                                    <i class="el-icon-view" />
                                </span>
                                <span @click="deleteMaterial(index)" class="el-upload-list__item-delete">
                                    <i class="el-icon-delete" />
                                </span>
                                <span @click="moveMaterial(index,'down')" class="el-upload-list__item-preview" v-if="index != revalue.length-1">
                                    <i class="el-icon-right" />
                                </span>
                            </span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <div :style="'width: '+size+'px;height: '+size+'px;'+'line-height:'+size+'px;'" @click="toSeleteMaterial" class="el-upload el-upload--picture-card" tabindex="0" v-if="revalue.length<max">
            <i class="el-icon-plus" />
        </div>
        <el-dialog :visible.sync="DialogVisible" append-to-body title="文件素材库" width="70%">
            <el-container>
                <el-main>
                    <el-card>
                        <div slot="header">
                            <el-row>
                                <el-col :span="14" style="display:flex;align-items:center"></el-col>
                                <el-col :span="10">
                                    <div class="flex align-center">
                                        <el-input clearable placeholder="请输入文件名称" style="width:200px" v-model="page.name"></el-input>
                                        <el-button @click="getMedia('init')" size="small" style="margin-left:10px" type="success">查询</el-button>
                                        <el-upload :action="uploadApi" :before-upload="beforeUpload" :data="{file_type:'image'}" :file-list="[]" :headers="headers" :on-progress="handleProgress" :on-success="handleSuccess" multiple>
                                            <el-button size="small" style="margin-left:10px" type="primary">批量上传</el-button>
                                        </el-upload>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-loading="tableLoading">
                            <el-alert :closable="false" center show-icon title="暂无数据" type="info" v-if="tableData.length <= 0" />
                            <el-row :gutter="5">
                                <div class="pb-10">
                                    <el-checkbox-group :max="max" v-model="urls">
                                        <el-col :key="index" :span="4" style="margin-top:4px" v-for="(item,index) in tableData">
                                            <el-card :body-style="{ padding: '5px' }">
                                                <el-image :preview-src-list="[item.path]" :src="item.path" :z-index="999" fit="contain" style="width: 100%;height: 100px" />
                                                <div>
                                                    <div class="pd-10">
                                                        <!-- <el-tag title="item.name" type="info">{{item.name}}</el-tag> -->
                                                        <a :title="item.name" class="text-line1 font-12">{{item.name}}</a>
                                                    </div>
                                                    <el-checkbox :label="item.path" class="material-name">选择</el-checkbox>
                                                    <el-row>
                                                        <el-col :span="24" class="col-do">
                                                            <el-button @click="materialDel(item)" size="medium" type="text">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-checkbox-group>
                                </div>
                            </el-row>
                            <div class="pt-10">
                                <el-pagination :current-page.sync="page.page" :page-size="page.limit" :page-sizes="[12, 24]" :total="page.total" @current-change="pageChange" @size-change="sizeChange" class="pagination" layout="total, sizes, prev, pager, next, jumper" />
                            </div>
                        </div>
                    </el-card>
                </el-main>
            </el-container>
            <span class="dialog-footer" slot="footer">
                <el-button @click="DialogVisible = false">取 消</el-button>
                <el-button @click="sureUrls" type="primary">确 定</el-button>
            </span>
        </el-dialog>
		<el-dialog :visible.sync="mediaVisible" append-to-body width="35%">
            <img :src="url" alt style="width: 100%" />
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStorage } from '@/utils/auth'
export default {
    props: {
        type: {
            default: 'image',
            type: String,
        },
        value: {
            type: Array,
        },
        size: {
            default: '60px',
            type: String,
        },
        max: {
            default: 10,
            type: Number,
        },
    },
    data() {
        return {
            imageUrl: '',
            headers: {
                Authorization: 'Bearer ' + getStorage('Authorization'),
            },
            DialogVisible: false,
            tableLoading: false,
            revalue: this.value,
			mediaVisible:false,
			url:'',
            tableData: [],
            page: {
                page: 1,
                limit: 12,
                total: 0,
                name: null,
            },
            urls: [],
        }
    },
    mounted() {
        if(this.revalue.length>0){
            this.urls=this.revalue
        }
    },
    computed: {
        ...mapGetters(['uploadApi']),
    },
    watch: {
        value(val) {
            this.revalue = val
        },
        revalue: function (val) {
            this.$emit('set-content', val)
        },
    },
    methods: {
		moveMaterial(index, type) {
            if (type == 'up') {
                const tempOption = this.revalue[index - 1]
                this.$set(this.revalue, index - 1, this.revalue[index])
                this.$set(this.revalue, index, tempOption)
            }
            if (type == 'down') {
                const tempOption = this.revalue[index + 1]
                this.$set(this.revalue, index + 1, this.revalue[index])
                this.$set(this.revalue, index, tempOption)
            }
        },
		zoomMaterial(index){
			this.mediaVisible = true
            this.url = this.revalue[index]
		},
        toSeleteMaterial() {
            this.DialogVisible = true
            this.getMedia()
        },
        getMedia(type = '') {
            this.tableLoading = true
            if (type == 'init') {
                this.page.page = 1
            }
            this.$request.get('/file/' + this.type, this.page).then((res) => {
                this.tableData = res.items
                this.page.total = res.page.total
                console.log(res)
                this.tableLoading = false
            })
        },
        materialDel(item) {
            this.$request.del('/file/delete?id=' + item.id).then((res) => {
                this.$message.success('删除成功')
                this.getMedia()
            })
        },
        deleteMaterial(index) {
            const that = this
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(function () {
                that.revalue.splice(index, 1)
            })
        },
        handleSuccess(res, file) {
            this.getMedia()
        },
        handleProgress() {},
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG、PNG、GIF、JPEG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        sureUrls() {
            console.log(this.urls)
            this.revalue = this.urls
            this.DialogVisible = false
        },
        sizeChange(val) {
            this.page.page = 1
            this.page.limit = val
            this.getMedia()
        },
        pageChange(val) {
            this.page.page = val
            this.getMedia()
        },
    },
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>